<template>
<div class="big_main">
        <yqheader></yqheader>
        <div class="content_js">
            <div class="top_bottom">
                <p>订单配送至</p>
                <h1>新增收货地址<i class="iconfont icon-rightArr"></i></h1>
            </div>
            <div class="content_top">
                <div class="song_time">
                    <div class="fl_time">
                        <h5>送达时间</h5>
                        <span>蜂鸟专送</span>
                    </div>
                    <p class="cuikni">尽快送达(<a href="">20:14</a>送达)</p>
                </div>
                   <p class="zf_methods"><span>支付方式</span><a>在线支付</a></p>
            </div>
            <!-- 华莱士 -->
            <div class="content_middle">
                <div class="hlshi">
                    <p>华莱士鸡翅汉堡<span>(<a>安义店</a>)</span></p>
                    <ul class="gods_ylist">
                        <li v-for="(items,index) in goodList" :key="index">
                            <div class="gods_hlshi_right">
                               <img :src="getImgUrl(items)" alt="">
                                <span>{{items.name}}</span>
                            </div>
                              <div class="gods_hlshi_number">
                                <a href=""><span v-show="items.num>1">*</span>{{items.num}}</a>
                                <span >￥<a href="" class="numberspan">{{(items.price)*items.num}}</a></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
         <yqfooter  :footerdata='numberzj' :Yhmoney="Yhmoney"></yqfooter>
</div>
</template>
<script>
import axios from 'axios'
import yqheader from "@/components/yqheader.vue";
import yqfooter from "@/components/yqfooter.vue";
export default {
  name: "home",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      datas:[],
      footerdata:'',
      Yhmoney:'',
      localstorege:[],
      numberzj:'',
      goodList:""
    }
  },
  components: {
    yqheader,
    yqfooter
  },
  methods:{

        getImgUrl(item) {
        var str = "";
        var hz = item.image_path.slice(32, 37) == "png" ? "png" : "jpeg";
        str = `//fuss10.elemecdn.com/${
            item.image_path
        }.${hz}?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/`;
        return str;
        },
  },
  mounted(){
     this.uname = localStorage.getItem('uname');
     var ShopInfo = this.uname + 'goodInfo';
     this.goodList = localStorage.getItem(ShopInfo);
     this.goodList = JSON.parse(this.goodList);
     console.log(this.goodList.length);
   var totalPrice=0;
   for(var i=0;i< this.goodList.length;i++){
       console.log(this.goodList[i]);
    var price=this.goodList[i].num* this.goodList[i].price;
    totalPrice+=price
   }
   this.numberzj=totalPrice;
   console.log(this.numberzj);
  }
};
</script>
<style>
.big_main {
  height: 570px;
  width: 100%;
}
.top_bottom {
  padding-left: 20px;
}
.top_bottom p {
  padding-top: 10px;
  font-size: 12px;
  color: #ade2ff;
  font-weight: bold;
}
.content_js h1 {
  font-size: 22px;
  color: #fff;
}
.content_js {
    overflow:auto;
  padding-top: 55px;
  padding-bottom:44px;
  width: 100%;
  height: 100%;
  background: #0c99ff;
}
.content_top {
    overflow:hidden;
  padding: 0 20px;
  box-sizing: border-box;
  width: 95%;
  margin: 0 auto;
  height: 148px;
  background: #fff;
}
.song_time {
  justify-content: space-between;
  height: 80px;
  align-items: center;
  border-bottom: 1px solid #fafafa;
  display: flex;
}
.fl_time h5 {
  color: #5f5f5f;
  font-size: 16px;
}
.fl_time span {
  text-align: center;
  background: #0087ff;
  color: #fff;
  font-weight: bold;
  display: inline-block;
  width: 60px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
}
.cuikni {
  color: #5aafff;
  font-size: 18px;
}
.cuikni a {
  color: #5aafff;
  font-size: 18px;
  font-weight: bold;
}
.zf_methods{
    font-size:15px;
    margin-top:20px;
    display:flex;
    justify-content:space-between;
}
.zf_methods a{
    color: #2897ff;
}
/*华莱士开始*/
.content_middle{
    width:95%;
    margin:10px auto;
    padding:0 20px 0 20px;
    box-sizing:border-box;
    background: #fff;
}
.hlshi p{
    height:40px;
     border-bottom:1px solid #f2f2f2;
    line-height: 40px;
    font-size:16px;
    font-weight:bold;
}
.hlshi p span{
    font-size:12px;
    font-weight:normal;
    color: #5f5f5f;
    margin-left:5px;
}
.gods_ylist li{
    height:50px;
    display:flex;
    align-items:center;
    border-bottom:1px solid #fafafa;
}
.gods_hlshi_right{
    width:50%;
    display:flex;
    align-items:center;
}
.gods_hlshi_number{
    width:50%;
    justify-content: space-between;
    display:flex;
}
.gods_hlshi_right span{
    margin-left:10px;
}
.gods_hlshi_right img{
    width: 40px;
    height: 40px;
}
</style>
